<!--
 * @name score
 * @description 组件描述
 * @author idouya
 * @email elegentfrog@163.com
 * @date 2025-07-03
 -->

<template>
  <div class="p-score common-bg common-layout">
    <page-title
      :discipline="gameInfo.discipline"
      :event="gameInfo.event"
      :match="gameInfo.match"
      :type="gameInfo.type"
      :startTime="gameInfo.startTime"
      :eventName="gameInfo.eventName"
      :showTime="true"
    ></page-title>
    <div class="content">
      <div class="content-top">
        <div class="line1">
          <div class="order">{{ scoreData?.Order }}</div>
          <div class="name">{{ scoreData?.AthleteName }}</div>
          <div class="club">{{ scoreData?.CountryName }}</div>
        </div>
        <div class="line1">
          <div class="order horseOrder">{{ scoreData?.HorseOrder }}</div>
          <div
            class="name horseName"
            :class="[atheleteInfo?.HorseName?.length > 13 ? 'horseNameAdapt' : '']"
          >
            {{ scoreData?.HorseName }}
          </div>
          <div class="line1-time">
            <!-- <div class="time" v-if="scoreData.IsFinal != 0">
              {{ formattedTime() }}
            </div> -->
          </div>
        </div>
      </div>
      <div class="content-bottom">
        <div class="header">
          <template v-for="(item, index) in scoreData.scoreList" :key="index">
            <div class="header-item" v-if="item?.value">
              <div class="header-item-title">{{ item?.label }}</div>
              <div :class="['header-item-score', item?.value ? '' : 'hide']">
                {{ item?.value || '0' }}
              </div>
            </div>
          </template>
          <!-- <div class="header-item" v-if="scoreData?.H">
            <div class="header-item-title">H</div>
            <div :class="['header-item-score', scoreData?.H ? '' : 'hide']">
              {{ scoreData?.H || '' }}
            </div>
          </div>
          <div class="header-item" v-if="scoreData?.C">
            <div class="header-item-title">C</div>
            <div :class="['header-item-score', scoreData?.C ? '' : 'hide']">
              {{ scoreData?.C || '' }}
            </div>
          </div>
          <div class="header-item" v-if="scoreData?.M">
            <div class="header-item-title">M</div>
            <div :class="['header-item-score', scoreData?.M ? '' : 'hide']">
              {{ scoreData?.M || '' }}
            </div>
          </div>
          <div class="header-item" v-if="scoreData?.B">
            <div class="header-item-title">B</div>
            <div :class="['header-item-score', scoreData?.B ? '' : 'hide']">
              {{ scoreData?.B || '' }}
            </div>
          </div> -->
        </div>
        <div class="footer">
          <div class="footer-item">百分比得分</div>
          <div class="footer-item">{{ scoreData?.Score || '' }}</div>
          <div class="footer-item">当前排名</div>
          <div class="footer-item rank">{{ scoreData?.Rank || '' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import useStore from '@/store'
import Storage from '@/assets/js/storage'
import Utils from '@/assets/js/utils'
import Config from '@/assets/js/config'
import { useMultiProcRequest } from '@/assets/js/useMultiProcRequest'

const { results, fetchForProcs } = useMultiProcRequest()

const gameInfo = ref({
  discipline: '马术',
  match: '',
  event: 'DRESINDV',
  // type: '实时成绩',
  startTime: '13:01:29',
  eventName: '',
})

const atheleteInfo = ref({
  order: 1,
  name: '杨舒涵',
  delegation: '中国',
  horseOrder: 201,
  club: '好骑士嘉豪马术',
  horseName: 'Joanna',
  time: '00:00',
})

const scoreData = ref({
  score: {
    E: '63.970',
    H: '63.970',
    C: '63.970',
    M: '63.970',
    B: '63.970',
  },
  scoreList: {},
  rank: 8,
  percentage: '64.852',
  scoreChange: 0,
})

const timeout = ref(0)

let timer = null

const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()

const params = ref({})
const procName = ref([])
const commonStore = useStore.useCommonStore()

// 计算格式化时间（00:00）
const formattedTime = () => {
  const min = Math.floor(timeout.value / 60)
    .toString()
    .padStart(2, '0')
  const sec = (timeout.value % 60).toString().padStart(2, '0')
  return `${min}:${sec}`
}

onUnmounted(() => {
  clearInterval(timer)
})
onMounted(async () => {
  params.value = route.query
  procName.value = Config.procNameList[route.name]
  await getData()
})

const getData = async () => {
  if (procName.value.length > 0) {
    await fetchForProcs(procName.value, {
      procName: procName.value[0],
      keyValues: params.value,
    })
  }
}

const startTimer = () => {
  timer = setInterval(() => {
    formattedTime()
    timeout.value++
  }, 1000)
}

watchEffect(() => {
  if (results.value?.recordset) {
    gameInfo.value.event = results.value.recordset[0]?.EventCode
    gameInfo.value.match = results.value.recordset[0]?.MatchName
    gameInfo.value.eventName = results.value.recordset[0]?.EventName
    scoreData.value = results.value.recordset[0]
    const judgeList = results.value.datasetList[2]
    const score = results.value.recordset[0]
    if (judgeList) {
      scoreData.value.scoreList = judgeList.map((item) => {
        return {
          label: item.col,
          value: score[item.col],
        }
      })
    }
    if (scoreData.value?.IsFinal != 1) {
      clearInterval(timer)
    } else {
      startTimer()
    }
  }
})

watch(
  () => commonStore.receivedActionMessages,
  (newVal, oldVal) => {
    if (newVal.length > 0) {
      const latestMsg = newVal[newVal.length - 1]
      console.log(latestMsg)
    }
  },
  { deep: true }
)

watch(
  () => route.query,
  (val) => {
    params.value = val
    getData()
  }
)
</script>

<style scoped lang="scss">
@import '@/assets/scss/dressage/score4';
</style>
